<script lang="ts" setup>
import {type PropType} from "vue"
import {type RouteRecordRaw} from "vue-router"
import SidebarItemLink from "./SidebarItemLink.vue"
import {isExternal} from "@/utils/validate"


import {useTheme} from "@/hooks/useTheme"

const {activeThemeName} = useTheme()

const defaultTitle = 'default-title'

const props = defineProps({

  isCollapse: {
    type: Boolean,
    default: false
  },
  isActive: {
    type: Boolean,
    default: false
  },
  routes: {
    type: Object as PropType<RouteRecordRaw[]>,
    default: () => []
  }
})


const regexPath = (path: string) => {
  return path.replace(/\/+/ig, '/').replace(/\/$/, '')
}

const resolvePath = (meta: any, ...routePath: string[]) => {
  if (isExternal(routePath[0])) {
    return routePath[0]
  }
  // 判断meta是否有herf属性
  if (isExternal(meta?.href as string)) {
    return meta.href
  }
  return regexPath(routePath.join('/'))
}


const getTitle = (item: RouteRecordRaw) => `${item?.meta?.title || defaultTitle}`

const bindTitle = ref<string[]>([defaultTitle])

const titleUpdate = (title: string) => {
  if (props.isCollapse) {
    bindTitle.value[0] = defaultTitle
  }
  if (bindTitle.value[0] !== title) {
    bindTitle.value[0] = title
  }
}


// 监视标题
watch(() => bindTitle.value[0], () => {
  console.log('bindTitle', bindTitle.value[0])
})

// watch(()=>props.isCollapse,()=>{
//   console.log('udpate',props.isCollapse)
//   if (props.isCollapse) {
//     bindTitle.value[0] = defaultTitle
//   }
// })


// 监听节点是否展开
const nodeIsCallapse = computed(() => {
  return (title: string) => {
    // 当前节点展开并且侧边栏关闭
    return title === bindTitle.value[0] && props.isCollapse
  }
})


</script>

<template>
  <v-list v-model:opened="bindTitle" :theme="activeThemeName"
          style="color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)); height: 100%;"
          class="m-slider-list-container">
    <slot/>
    <template v-for="item in props.routes" :key="item?.path">
      <!-- 组件是否显示 -->
      <template v-if="!item?.meta?.hidden">
        <!-- 有子路由并且不止一个 -->
        <template v-if="item?.children && item?.children?.length !== 1">
          <SidebarItemLink :item="item" :to="resolvePath(item.meta, item.path)" @titleUpdate="titleUpdate"
                           :parent-title="getTitle(item)"/>
          <v-list-group :value="getTitle(item)" :class="{ 'node-is-callapse': nodeIsCallapse(getTitle(item)) }">
            <SidebarItemLink v-for="child in item?.children" :key="resolvePath(null, item.path, child.path)"
                             :to="resolvePath(child.meta, item.path, child.path)" :item="child"
                             @titleUpdate="titleUpdate"
                             :parent-title="getTitle(item)"/>
          </v-list-group>
        </template>
        <!-- 只有一个子路由 -->
        <template v-else-if="item?.children && item?.children?.length === 1">
          <SidebarItemLink v-for="child in item?.children" :key="resolvePath(null, item.path, child.path)"
                           :to="resolvePath(child.meta, item.path, child.path)" :item="child" @titleUpdate="titleUpdate"
                           :parent-title="getTitle(item)"/>
        </template>
        <!-- 没有子路由 -->
        <template v-else>
          <SidebarItemLink :key="item?.path" :to="resolvePath(item.meta, item.path)" :item="item"
                           :parent-title="getTitle(item)" @titleUpdate="titleUpdate"/>
        </template>
      </template>
    </template>
  </v-list>
</template>

<style lang="scss" scoped>
.node-is-callapse {

  .m-slider-list-container {
    //max-height: 100vh;
    height: 100vh;
    overflow: auto;
  }

  // 需要使用样式穿透，否则样式不生效
  :deep(.v-list-group__items .v-list-item) {
    padding-inline-start: 16px !important;
  }
}
</style>
